<template>
    <table>
        <thead>
            <th v-if="checkbox" style="width:10px"><input type="checkbox" /></th>
            <th v-for="(item, i) in heads" :style="item.style" :key="i">{{ item.title }}</th>
        </thead>
        <tbody>
            <tr v-for="(row, i) in data" :key="i">
                <td v-if="checkbox"><input type="checkbox" /></td>
                <column v-for="(node, j) in nodes" :key="j" :node="node" :row="row"></column>
            </tr>          
        </tbody>
    </table>
</template>
<script lang="ts">
import { ref, VNode, PropType } from 'vue'
import Column from './colum'
import { TableHeadInfo } from './table'
import { isNumber } from '/@/utils/is'
export default {
    components:{ Column },
    props: {
        data: {
            type: Object as PropType<Array<Object>>,
            default: ()=>([]),
            required: true
        },
        checkbox: {
            type: Boolean,
            default: ()=>(false)
        }
    },
    setup () {
        let heads = ref<TableHeadInfo[]>([])  
        let nodes = ref<VNode[]>([])
        return {
            heads,
            nodes          
        }
    },
    beforeMount () {
        console.log(this.nodes)
    },  
    beforeCreate() {
        let children = this.$slots.default && this.$slots.default()
        if (children) {
            for(let i=0; i < children.length; i++) {
                let p = children[i]
                if(p.props) {
                    let tableHeadInfo:TableHeadInfo = { title: p.props.label }
                   
                    if(p.props.width) {
                        if (isNumber(p.props.width)) {
                            tableHeadInfo.style = `width: ${p.props.width}px`
                        } else {
                            tableHeadInfo.style = `width: ${p.props.width}`
                        }        
                    }
                    this.heads.push(tableHeadInfo)
                }
                this.nodes?.push(p)                
            }           
        }
    }
}
</script>

<style lang="scss" scoped>
 table, table tr td { padding: 0.5em 1em; border-bottom:1px solid #ccc; text-align: left; }
    table thead th {
        padding: 0.5em 1em; border-bottom:2px solid #ccc; text-align: left;
    }
    table { width: 100%; min-height: 25px; line-height: 25px; border-collapse: collapse;}    
</style>